@charset "utf-8";
@import "reset";
@function r($px){
	@return $px/100px*1rem;
}
body{
	background-color: #303030;
}
.web{
	//background-color: #505050;
	header{
		color:#fefcfd;
		height: r(100px);
		background-color: #21201c;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 r(17px);
		font-size: r(31px);
		.close{
			a{
				color: white;
			}
		}
		.search{
			position: relative;
			i{
				position: absolute;
				top:r(15px);
				left: r(10px);
			}
			input{
				width: r(550px);
				height: r(60px);
				border-radius: 10px;
				border:1px solid white;
				background-color:#21201c;
				color: white;
				padding-left: r(40px);
			}
		}
	}
	hr{
		margin: 0 10px;
		border: 0.5px solid #524e4d;
	}
	.login-info{
		background-color: #21201c;
		font-size: r(30px);
		color: white;
		padding-top: r(60px);
		.login-img{
			width: r(200px);
			height: r(200px);
			margin: 0 auto;	
			img{
				width: r(200px);
				height: r(200px);
				border-radius: 50%;
				margin: 0 auto;
			}
		}
		.login-name{
			width: 50%;
			margin: 0 auto;
			text-align: center;
			p{
				//font-size: r(40px);
				span{
					font-size: r(20px);
					border: 1px solid white;
					padding: r(2px) r(10px);
					margin-left: r(10px);
				}
			}
		}
		.star{
			color: gold;
			width: 50%;
			margin: 0 auto;
			text-align: center;
			i{
				margin: r(10px);
			}
		}
		.text{
			width: 50%;
			margin: 0 auto;
			text-align: center;
			span{
				color: red;
				font-size: r(30px);
			}
		}
		.box{
			display: flex;
			width: 70%;
			margin: 0 auto;
			margin-top: r(10px);
			margin-bottom: r(10px);
			padding: r(20px);
			.left{
				width:r(250px);
				height: r(50px);
				line-height: r(50px);
				text-align: center;
				border: none;
				background-color: red;
				border-radius: 10px;
				margin-right: r(10px);
			}
			.right{
				width:r(250px);
				height: r(50px);
				line-height: r(50px);
				text-align: center;
				border: none;
				border-radius: 10px;
				background-color: gainsboro;
			}
		}
	}
	.operate{
		background-color: #222222;
		margin-top: r(15px);
		//height: 300px;
		.first{		
			color: white;
			font-size: r(30px);
			padding: r(20px);
			label{
				display: flex;
				justify-content: space-between;
			}		
		}	
		input{
			display: contents;
		}
		input:checked + div{
			max-height: r(200px);
			transition: all 1s;
		}
		.second{
			max-height: 0;
			overflow: hidden;
			color: white;
			font-size: r(30px);
			text-align: center;
			//padding: r(20px) 0;
			p{
				padding: r(20px) 0;
			}
		}
	}
}